{% extends "index.html" %}

{% block content %}
<div id="container" style="overflow:hidden;width:100%">
     <div style="float:left;width:320px;height:240px;margin:25px 45px 10px 10px;">
		 <video id="live" width="640" height="480" style="display: none;" autoplay></video>
		<canvas width="320" id="canvas" height="240" ></canvas>
     </div>
     <div style="float:left;width:340px;height:280px;margin:0;">
		<h3 style="text-align: center;">{{ username }}</h3>
		<div id="training" class="progress progress-striped active">
			<div class="progress-bar" style="width: 0; text-align: center;"></div>
		</div>
		<div style="text-align: center;">
			<button class="botonazul" id="uploadPhoto">Tomar Fotografía</button>
		</div>
	</div>
</div>
{% end %}

{% block scripts %}
<link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css">
<script src="/static/js/addphotos.js" type="text/javascript"></script>
{% end %}
